<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@ include file="/views/include/nocachehead.jsp"%>
<title>${feature.title}</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.raty.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/ratyStar.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/plugin/ad-gallery/jquery.ad-gallery.pack.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/gallery.css" >
</head>
<style type="text/css">
  #gallery {
    padding: 30px;
    background: #e1eef5;
  }
</style>
<body>
	<%@ include file="/views/include/statusbar.jsp"%>
	<br>
	<br>
	<br>
	<skyline:setSessionAttrToVar var="SESSION_USER" key="SESSION_USER"/>
	<div>
		<a href="${pageContext.request.contextPath}/attraction/feature/list/${requestScope.feature.attractionId}.html">查看更多</a>
	</div>
	<div>
		<div>
			<div>
				<img alt="${requestScope.feature.title}" src="${pageContext.request.contextPath }/image/${requestScope.feature.portrait}">
			</div>
			<div>
				<P>
					${requestScope.feature.title}
				</p>
				<p>
					<label>大约消费：</label>
					${requestScope.feature.consume}元
				</p>
				<div>
					<div id="Raty_${feature.id}" title="${feature.star }">网友评分：</div>
					<div>(已有<span id="voteNum">${feature.votes }</span>人评价)</div>
				</div>
				<p>
					<label>更新时间：</label>
					${requestScope.feature.updateTime}
				</p>
			</div>		
		</div>
		<div>
			<label>简介：</label><c:out value="${requestScope.feature.detail}" />
		</div>
		<div>
			<div>
				特色图集
			</div>
			<div id="gallery" class="ad-gallery">
		      <div class="ad-image-wrapper"></div>
		      <div class="ad-controls"></div>
		      <div class="ad-nav">
		        <div class="ad-thumbs">
		          <ul class="ad-thumb-list">
		          	<c:forEach items="${requestScope.photos}" var="photoFile" varStatus="status">
		          	<li>
		              <a href="${pageContext.request.contextPath}/image/<c:out value="${photoFile.middleFile}" />.${photoFile.ext}">
		                <img src="${pageContext.request.contextPath}/image/<c:out value="${photoFile.smallFile}" />.${photoFile.ext}" class="image${status.index}">
		              </a>
		            </li>
					</c:forEach>
		          </ul>
		        </div>
		      </div>
		    </div>
		</div>
	</div>
	
	<script type="text/javascript">
		(function($){
			$(document).ready(function(){
				var ratyReadOnly = true;
				<c:if test="${not empty pageScope.SESSION_USER }">
				ratyReadOnly = false;
				</c:if>
				$("div[id^=Raty_]").each(function(){
					var This = this;
					var targetId = this.id.substring(5);
					var setting = {
						width:'200px',
						targetId:targetId,
						targetObj:This,
						targetType:'FEATURE',
						readOnly:ratyReadOnly,
						start:$(This).attr('title'),
						numId:'voteNum'
					};
					Raty.init(setting);
				});
			
				photos = [];
				<c:forEach items="${requestScope.photos}" var="photoFile" varStatus="status">
				photos.push({id:'${photoFile.id}'});
				</c:forEach>
				
				$('.ad-gallery').adGallery({ 
					loader_image: '${pageContext.request.contextPath}/plugin/ad-gallery/loader.gif',
				    start_at_index: 0,
				    width: false,
				    height: false,
				    slideshow: {enable: false},
				    effect: 'fade',
				    enable_keyboard_move: true,
				    cycle: true
				    /*callbacks: {afterImageVisible: loadPhotoInfo}*/
				});
			});
		})(jQuery);
	</script>
</body>
</html>